<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Table 表格6</title>
	<link rel="stylesheet" href="../../static/css/element2.css">
	<script src="../../static/js/vue.global.prod.js"></script>
	<script src="../../static/js/element-plue2.js"></script>
	
	<script src="../../static/js/icons-vue.js"></script>
	<link rel="stylesheet" href="../../static/css/com.css">
<style type="text/css">
.abc{
	text-align: center;
}

.slider-demo-block1 {
	display: flex;
	align-items: center;
	padding-right: 12px;
}
.slider-demo-block1 .el-slider {
	margin-top: 0;
	margin-left: 12px;
	flex: 100;
}

.box-buttons{
	display: flex;
	margin-bottom: 12px;
}
.box-buttons-l{
	flex: 1;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-affix :offset="10"><div id="a_link"></div></el-affix><script src="table.js"></script>
	
	<el-divider content-position="left">自定义表格</el-divider><!-- =============================================================== -->
	<p class="desc">自定义</p>
	<div class="box-buttons">
		<div class="box-buttons-l">
			<el-button type="primary" @click="msgTo('功能1')">功能1</el-button>
			<el-button type="primary" @click="msgTo('功能2')">功能2</el-button>
			<el-button type="primary" @click="msgTo('功能3')">功能3</el-button>
		</div>
		<div class="box-buttons-r">
			<el-dropdown :hide-on-click="false" hide-timeout=500 max-height="300px">
				<el-button type="primary">筛选列<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item><el-checkbox v-model="checks.id" label="ID"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.date" label="日期"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.name" label="名字"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.address" label="地址"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.area" label="地区"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.rest" label="休假"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.tag" label="标签"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.img1" label="图片"></el-checkbox></el-dropdown-item>
						<el-dropdown-item><el-checkbox v-model="checks.remark" label="备注"></el-checkbox></el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
	<el-table ref="myTableRef" :data="tableData" border :empty-text="noData" row-key="id" scrollbar-always-on style="width: 100%;" @cell-click="cellClick">
		<el-table-column v-if="checks.id" prop="id" label="ID" width="80" header-align="center" align="center"></el-table-column>
		<el-table-column v-if="checks.date" prop="date" label="日期" width="180" header-align="center" align="center">
			<template #default="scope">
				<el-icon><timer /></el-icon>
				<span style="margin-left: 10px">{{ scope.row.date }}</span>
			</template>
		</el-table-column>
		<el-table-column v-if="checks.name" prop="name" label="名字" width="120" header-align="center" align="center" sortable>
			<template #default="scope">
				<!-- <span v-if="!isVif(scope)" @click="seeScope(scope)" style="margin-left: 10px">{{ scope.row.name }}</span> -->
				<el-input :ref="getRef(scope)" v-if="isVif(scope)" v-model="scope.row.name" @blur="inputBlur" placeholder="Please input" ></el-input>
			</template>
		</el-table-column>
		<el-table-column v-if="checks.address" prop="address" label="地址" width="180" header-align="center" align="center" show-overflow-tooltip>
			<template #default="scope">
				<el-input :ref="getRef(scope)" v-if="isVif(scope)" v-model="scope.row.address" @blur="inputBlur" placeholder="Please input" ></el-input>
			</template>
		</el-table-column>
		<el-table-column v-if="checks.area" prop="area" label="地区" width="200" header-align="center" align="center" show-overflow-tooltip>
			<template #default="scope">
				<el-cascader :ref="getRef(scope)" v-if="isVif(scope)" v-model="scope.row.area" :options="options" @change="handleChange" :props="props" filterable clearable></el-cascader>
				<!-- <el-input :ref="getRef(scope)" v-if="isVif(scope)" v-model="scope.row.area" @blur="inputBlur" placeholder="Please input" ></el-input> -->
			</template>
		</el-table-column>
		<el-table-column v-if="checks.rest" prop="rest" label="休假" width="180" header-align="center" align="center" show-overflow-tooltip>
			<template #default="scope">
				<!-- <el-input :ref="getRef(scope)" v-if="isVif(scope)" v-model="scope.row.rest" @blur="inputBlur" placeholder="Please input" ></el-input> -->
				<el-select :ref="getRef(scope)" v-if="isVif(scope)" v-model="scope.row.rest" placeholder="请选择...">
					<el-option v-for="item in rests" :key="item.id" :label="item.value" :value="item.value"></el-option>
				</el-select>
			</template>
		</el-table-column>
		<el-table-column v-if="checks.tag" prop="tag" label="标签" width="180" header-align="center" align="center"></el-table-column>
		<el-table-column v-if="checks.img1" prop="image" label="图片" width="180">
			<template #default="scope">
				<div style="display: flex; align-items: center">
					<!-- <img src="../../static/image/element-logo.png" alt=""> -->
					<el-image @click="showImg(scope.row.img1)" style="width: 180px; height: 100px" :src="scope.row.img1" :fit="fit"></el-image>
				</div>
			</template>
		</el-table-column>
		<el-table-column v-if="checks.remark" prop="remark" label="备注" width="1800" header-align="center" align="center" show-overflow-tooltip></el-table-column>
		<el-table-column label="操作" width="180" header-align="center" align="center">
			<template #default="scope">
				<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
				<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-button type="primary" @click="seeData">查看数据</el-button>
	<div style="height: 1000px;"></div>
	<el-dialog v-model="show_img" class="iframe" style="margin-bottom: 0px;" width="800px" top="8vh" title="查看大图">
		<div class="layui-body" id="iframe_div" style="height:auto">
			<el-image  style="width: auto; height: auto" :src="img_path" fit="full"></el-image>
		</div>
	</el-dialog>
	<el-affix position="bottom" :offset="30">
		<div class="slider-demo-block1">
			<span @click="show_slider = !show_slider" style="color: #00000055;">横向滑动：</span>
			<el-slider v-if="show_slider" v-model="scrollLeft" :max="max0" :format-tooltip="formatTooltip" @input="inputSlider0"></el-slider>
		</div>
	</el-affix>
</div>
</body>
<script>
const arr_options = [
	{
		value: '中国',
		label: '中国',
		children: [
			{
				value: '湖北',
				label: '湖北',
				children: [
					{value: '武汉',label: '武汉',},
					{value: '麻城',label: '麻城',},
					{value: '宜昌',label: '宜昌',},
					{value: '仙桃',label: '仙桃',},
				],
			},
			{
				value: '上海',
				label: '上海',
				children: [
					{value: '闵行',label: '闵行',},
					{value: '浦东',label: '浦东',},
				],
			},
		],
	},
	{
		value: '美国',
		label: '美国',
		children: [
			{
				value: '纽约',
				label: '纽约',
				children: [
					{value: '奥尔巴尼',label: '奥尔巴尼',},
					{value: '伊利',label: '伊利',},
				],
			},
			{
				value: '华盛顿',
				label: '华盛顿',
				children: [
					{value: '华尔街',label: '华尔街',},
					{value: '谱尼街',label: '谱尼街',},
				],
			},
		],
	},
]
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			scrollLeft: 0,
			max0: 2000,
			show_img: false,
			img_path: '',
			show_slider: true,
			isEdit: "",
			value: '',
			fileIndex: 6,
			noData: "没有数据...",
			props: {expandTrigger: 'hover',},
			options: arr_options,
			rests: [
				{id: 1, value: '周一'},
				{id: 2, value: '周二'},
				{id: 3, value: '周三'},
				{id: 4, value: '周四'},
				{id: 5, value: '周五'},
				{id: 6, value: '周六'},
				{id: 7, value: '周日'},
			],
			tableData0: [],
			tableData: [
				{
					id: 6001,
					date: '2016-05-03',
					name: 'Tom1',
					address: 'No. 189, Grove St, Los Angeles',
					area: ['中国', '湖北', '武汉'],
					rest: "周一",
					tag: 'Home',
					img1: '../../static/image/element-logo.png',
					remark: "测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。",
				},
				{
					id: 6002,
					date: '2016-05-02',
					name: 'Tom2',
					address: 'No. 189, Grove St, Los Angeles',
					area: ['中国', '上海', '浦东'],
					rest: "周三",
					tag: 'Office',
					img1: '../../static/image/element-logo.png',
					remark: "测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。",
				},
				{
					id: 6003,
					date: '2016-05-04',
					name: 'Tom4',
					address: 'No. 189, Grove St, Los Angeles',
					area: ['中国', '湖北', '北京'],
					rest: "周五",
					tag: 'Home',
					img1: '../../static/image/element-logo.png',
					remark: "测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。",
				},
				{
					id: 6004,
					date: '2016-05-01',
					name: 'Tom3',
					address: 'No. 189, Grove St, Los Angeles',
					area: ['美国', '华盛顿', '华尔街'],
					rest: "周六",
					tag: 'Office',
					img1: '../../static/image/element-logo.png',
					remark: "测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。测试备注。。。。",
				},
			],
			checks: {
				id: true,
				date: true,
				name: true,
				address: true,
				area: true,
				rest: true,
				tag: true,
				img1: true,
				remark: true,
			},
			
		}
	},
	computed:{
		btn(){
			return function(i){
				if(this.$data.fileIndex == i){
					return "layui-btn";
				}else{
					return "layui-btn0";
				}
			}
		},
		isVif(){
			return function(scope){
				let isEdit = scope.row.id + "-" + scope.column.property;
				// console.log(isEdit);
				return isEdit == this.isEdit;
			}
		},
		getRef(){
			return function(scope){
				return scope.row.id + "-" + scope.column.property;
			}
		}
		
	},
	methods:{
		// 自定义
		handleEdit(index, row) {
			console.log(index, row)
		},
		handleDelete(index, row) {
			console.log(index, row)
		},
		cellClick(row, column, cell, event){
			// console.log(row, column, cell, event);
			console.log(row.id, column.property);
			this.isEdit = row.id + "-" + column.property;
			
			//让input获得焦点
			this.$nextTick(()=>{
				// console.log(this.$refs);
				if(this.$refs[this.isEdit]){
					if(this.isEdit.includes("-area")){
						
					}else{
						this.$refs[this.isEdit].focus();
					}
				}
			});
			// this.$refs.ipt.focus();
		},
		inputBlur(){
			this.isEdit = '';
		},
		seeData(){
			console.log(this.$data.tableData);
		},
		seeScope(scope){
			// console.log(scope);
		},
		handleChange(v){
			console.log(v)
		},
		showImg(path){
			this.img_path = path;
			this.show_img = true;
		},
		formatTooltip(value) {
			return `${value} px`
		},
		inputSlider0(value) {
			// console.log("inputSlider0：" + value);
			this.$refs.myTableRef.setScrollLeft(value);
		},
		msgTo(msg) {
			alert("跳转到：" + msg);
		},
	},
	
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>
